<template>
	<up-popup :show="showPopup" :round="round" :mode="mode" @close="close" @open="open">
		<view class="popup-wrap">
			<view class="popup-btn-group flex">
				<view class="cancel" @click="close">取消</view>
				<view class="title">{{ title }}</view>
				<view class="confirm" @click="confirm">确认</view>
			</view>
			<view class="picker-view-wrapper">
				<picker-view :value="selectedIndex" @change="onPickerChange" class="picker-view"
					indicator-style="height: 50px;">
					<!-- 日期列 -->
					<picker-view-column>
						<view v-for="(item, index) in dayList" :key="index" class="picker-item">
							{{ item }}
						</view>
					</picker-view-column>

					<!-- 小时列 -->
					<picker-view-column>
						<view v-for="(item, index) in hourList" :key="index" class="picker-item">
							{{ item }}
						</view>
					</picker-view-column>

					<!-- 分钟列 -->
					<picker-view-column>
						<view v-for="(item, index) in minuteList" :key="index" class="picker-item">
							{{ item }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</up-popup>
</template>
<script setup>
import { ref, computed, watch } from 'vue'

// 初始化当前时间
const now = new Date()
const todayStr = now.toISOString().split('T')[0]
const showPopup = ref(false);
const emit = defineEmits(["select"]);
const open = () => {
	showPopup.value = true;
};

const close = () => {
	showPopup.value = false;
};

const confirm = () => {
	let day = dayList.value[selectedIndex.value[0]] + ' ' + hourList.value[selectedIndex.value[1]] + ':' + minuteList.value[selectedIndex.value[2]]
	console.log(selectedIndex.value, day)
	emit("select", day);
	close();
};
// 👉 生成 6 个月内的日期列表
const getDayList = () => {
	const result = []
	const today = new Date()
	const end = new Date()
	end.setMonth(end.getMonth() + 6)

	while (today <= end) {
		const y = today.getFullYear()
		const m = String(today.getMonth() + 1).padStart(2, '0')
		const d = String(today.getDate()).padStart(2, '0')
		result.push(`${y}-${m}-${d}`)
		today.setDate(today.getDate() + 1)
	}
	return result
}

const dayList = ref(getDayList())
const allHours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'))
const allMinutes = ['00', '15', '30', '45']

const hourList = ref([...allHours])
const minuteList = ref([...allMinutes])

// 当前选中的索引值
const selectedIndex = ref([0, 0, 0])

// 响应时间限制
const updateTimeOptions = () => {
	const selectedDay = dayList.value[selectedIndex.value[0]]
	const isToday = selectedDay === todayStr

	const currentHour = now.getHours()
	const currentMinute = now.getMinutes()
	const roundedMinute = Math.ceil(currentMinute / 15) * 15

	if (isToday) {
		// 限制小时列表
		hourList.value = allHours.filter(h => parseInt(h) >= currentHour)

		const selectedHour = hourList.value[selectedIndex.value[1]] || hourList.value[0]
		const isCurrentHour = parseInt(selectedHour) === currentHour

		if (isCurrentHour) {
			minuteList.value = allMinutes.filter(m => parseInt(m) >= roundedMinute)
			if (minuteList.value.length === 0) {
				// 当前小时分钟超出，自动跳到下一个小时
				const nextHourIndex = hourList.value.findIndex(h => parseInt(h) > currentHour)
				selectedIndex.value[1] = nextHourIndex !== -1 ? nextHourIndex : 0
				minuteList.value = [...allMinutes]
				selectedIndex.value[2] = 0
			}
		} else {
			minuteList.value = [...allMinutes]
		}
	} else {
		hourList.value = [...allHours]
		minuteList.value = [...allMinutes]
	}
}
updateTimeOptions()
const onPickerChange = (e) => {
	selectedIndex.value = e.detail.value
	updateTimeOptions()
}
defineExpose({ open, close });

</script>
<style lang="scss" scoped>
.popup-wrap {
	height: 50vh;

	.picker-view-wrapper {
		height: 250px;
		font-size: 26rpx;
		font-weight: 600;
	}

	.picker-view {
		width: 100%;
		height: 100%;
	}

	.picker-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
}
</style>
